<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="初始网址" prop="CloudCC_base_url">
        <el-input v-model="formData.CloudCC_base_url" placeholder="请输入初始网址" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="接口地址" prop="CloudCC_api_url">
        <el-input v-model="formData.CloudCC_api_url" placeholder="请输入CloudCC接口地址" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="CloudCC_userName">
        <el-input v-model="formData.CloudCC_userName" placeholder="请输入管理员账号" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="CloudCC_password">
        <el-input v-model="formData.CloudCC_password" placeholder="请输入管理员密码" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="登录标识" prop="CloudCC_binding">
        <el-input :disabled='true' v-model="formData.CloudCC_binding" placeholder="登录标识" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button type="primary" @click="submitForm">验证参数</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {getClientParam} from "@/api/client/clientParam";

export default {
  name: "cloudCCParam",
  components: {},
  props: [],
  data() {
    return {
      formData: {
        CloudCC_base_url: 'http://site.CloudCC_com',
        CloudCC_api_url: "",
        CloudCC_userName: "",
        CloudCC_password: "",
        CloudCC_binding: "",
    },
      fields:["CloudCC_base_url","CloudCC_api_url","CloudCC_userName","CloudCC_password","CloudCC_binding"],
    rules: {
      CloudCC_base_url: [{
        required: true,
        message: '请输入初始网址',
        trigger: 'blur'
      }],
        CloudCC_api_url: [{
        required: true,
        message: '请输入CloudCC接口地址',
        trigger: 'blur'
      }],
        CloudCC_userName: [{
        required: true,
        message: '请输入管理员账号',
        trigger: 'blur'
      }],
        CloudCC_password: [{
        required: true,
        message: '请输入管理员密码',
        trigger: 'blur'
      }],
        CloudCC_binding: [],
    },
  }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    getClientParam({
      "configKeys": this.fields.join(",")
    }).then(response => {
      this.formData = response.data;
    })
  },
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
